<template>
	<!-- t填写地址 -->
	<view class="content display  width_750 fontSize font_comm displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#000;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">填写地址</text>
			</template>
		</u-navbar>
		<view class="fn_content display  width_750 displayColumn displaycenter_aliem M-T30">
			<view class="fn_content_one display  width-699 displayColumn">
				<view class="one display  displaycenter_aliem">
					<span class="fn_one M-L24">收件人</span>
					<!-- <span class="fn_two M-R24">kanna</span> -->
					<input type="text" v-model="FormData.name" class="wode_inputs M-R24" placeholder-class="wode_sis" placeholder="请输入"/>
				</view>
				<view class="fn_linesssssss M-L24 M-T30"></view>
				<view class="one display  displaycenter_aliem M-T30">
					<span class="fn_one M-L24">手机号</span>
					<input type="text" v-model="FormData.phoneNumber" class="wode_inputs M-R24" placeholder-class="wode_sis" placeholder="请输入"/>
				</view>
				<view class="fn_linesssssss M-L24 M-T30"></view>
				<view class="one display  displaycenter_aliem M-T30">
					<span class="fn_one M-L24">所在地区</span>
					<input type="text" v-model="FormData.diqu" class="wode_inputs M-R24" placeholder-class="wode_sis" placeholder="请输入"/>
				</view>
				<view class="fn_linesssssss M-L24 M-T30"></view>
				<view class="one display  displaycenter_aliem M-T30">
					<span class="fn_one M-L24">详细地址</span>
					<input type="text" v-model="FormData.address" class="wode_inputs M-R24" placeholder-class="wode_sis" placeholder="请输入"/>
				</view>
			</view>
			<view class="fn_content_two display  width-699 displaycenter_aliem M-T24" >
				<view class="fn_circle display  all_item M-L24 " @click="flag = !flag"><view class="fn_circle_item" v-if="flag"></view></view>
				<span class="fn_three M-L8" >设为默认地址</span>
			</view>
		</view>
		<view class="fn_btns_all display  width_750 all_item" style="margin-top: 700rpx;">
			<button class="wode_btn display all_item" v-if="!mmflag" @click="serve">保存</button>
			<button class="wode_btn display all_item" v-if="mmflag" @click="serve1">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag:false,//是否设置为默认地址
				mmflag:false,
				id:'',
				FormData:{
					name:'',
					phoneNumber:'',
					diqu:'',
					address:''
				}
			}
		},
		onLoad(options) {
			console.log(JSON.parse(options.item))
			if(!uni.$u.test.isEmpty(options)){
				this.mmflag = true;
				let items = JSON.parse(options.item)
				this.FormData.name = items.consignee;
				this.FormData.phoneNumber = items.phone;
				this.FormData.diqu = items.province;
				this.id = items.id;
				this.FormData.address = items.detailAdress;
				this.flag = items.isDefault ==1?true:false
			}
		},
		methods: {
			serve1(){
				let data = {
					id:this.id,
					consignee:this.FormData.name,//收货人
					phone:this.FormData.phoneNumber,//手机号
					province:this.FormData.diqu,//省份
					detailAdress:this.FormData.address,//详细地址
					isDefault:this.flag ? 1 :0,//是否默认
				}
				this.$req.put('/xcx/userAdress',data).then(res=>{
					console.log(res)
					if(res.data.code==200){
						uni.navigateBack();
					}else{
						this.$modal.msg(res.data.msg)
					}
				})
			},
			serve(){
				this.$tab.navigateTo('/packageC/addressMange/addressMange')
				if(uni.$u.test.isEmpty(this.FormData.name)){
					this.$modal.msg('收件人不能为空!');
					return false
				}else if(uni.$u.test.isEmpty(this.FormData.phoneNumber)){
					this.$modal.msg('手机号不能为空!');
					return false
				}else if(uni.$u.test.isEmpty(this.FormData.diqu)){
					this.$modal.msg('地区不能为空 !');
					return false
				}else if(uni.$u.test.isEmpty(this.FormData.address)){
					this.$modal.msg('地址不能为空 !');
					return false
				}
				
				let data = {
					consignee:this.FormData.name,//收货人
					phone:this.FormData.phoneNumber,//手机号
					province:this.FormData.diqu,//省份
					detailAdress:this.FormData.address,//详细地址
					isDefault:this.flag ? 1 :0,//是否默认
				}
				this.$req.post('/xcx/userAdress',data).then(res=>{
					console.log(res)
					if(res.dtaa.code==200){
						this.$modal.msg('添加成功')
						setTimeout(()=>{
							uni.navigateBack();
						},500)
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.title{
	font-weight: 600;
	font-size: 34rpx;
	color: #232323;
}
.fn_content_one{
	width: 690rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.one{
	width: 699rpx;
	justify-content: space-between;
}
.fn_linesssssss{
	width: 630rpx;
	height: 0rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border: 2rpx solid #F6F6F6;
}
.fn_one{
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
}
.fn_two{
	font-weight: 600;
	font-size: 28rpx;
	color: #212121;
}
.wode_inputs{
	font-weight: 600;
	font-size: 28rpx;
	color: #212121;
	text-align: right;
}
.wode_sis{
	font-weight: 600;
	font-size: 28rpx;
	color: #666666;
}
.fn_circle{
	width: 36rpx;
	height: 36rpx;
	border:1rpx solid #126BC9;
	border-radius: 50%;
}
.fn_circle_item{
	width: 24rpx;
	height: 24rpx;
	background: #126BC9;
	border-radius: 50%;
}
.fn_three{
	font-weight: 600;
	font-size: 28rpx;
	color: #126BC9;
}
.fn_content_two{
	align-self: flex-start;
}
.wode_btn{
	width: 690rpx;
	height: 84rpx;
	background: #126BC9;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 600;
	font-size: 28rpx;
	color: #FFFFFF;
}
</style>
